/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-07 14:36:09
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-09-20 10:24:16
 */
import React, { useState, useEffect } from "react";
import { Spin, Empty } from "antd";
import api from "@services";
import moment from "moment";
import styled from "styled-components";


import { Area } from "@ant-design/plots";

const DemoArea = ({ className }) => {
	const [loading, setLoading] = useState(false);
	const [config, setConfig] = useState();
	const [tab, setTab] = useState(0);

	useEffect(() => {
		asyncFetch(0);
	}, []);

	const asyncFetch = async (tabIndex) => {
		setTab(tabIndex);
		let fun = api.trend.transfer.byday;
		if (tabIndex == 1) {
			fun = api.trend.transfer.byweek;
		} else if (tabIndex == 2) {
			fun = api.trend.transfer.bymonth;
		}
		setLoading(true);
		let res = await fun({ pageindex: 1, pagesize: 100 });
		setLoading(false);
		if (res.msg != 'ok' || !res.data || res.data.length == 0) {
			setConfig(null);
			return;
		}
		// console.log(res);
		let data = res.data.map(t => {
			return {
				date: moment(t.timestamp).format('YYYY-MM-DD'),
				count: t.count
			};
		});
		const c = {
			data,
			xField: "date",
			yField: "count",
			xAxis: {
				range: [0, 1],
				tickCount: res.data.length
			},
			areaStyle: () => {
				return {
					fill: "l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff"
				};
			}
		};
		setConfig(c);
	};

	return (
		<div className={className}>
			<Spin spinning={loading}>
				<div className="tab-bar">
					<span className={tab == 0 ? "curr" : ""} onClick={() => asyncFetch(0)} data-api-url="/transfer/query/byday?pageindex=1&pagesize=100">
						1D
					</span>
					<span className={tab == 1 ? "curr" : ""} onClick={() => asyncFetch(1)} data-api-url="/transfer/query/byweek?pageindex=1&pagesize=100">
						7D
					</span>
					<span className={tab == 2 ? "curr" : ""} onClick={() => asyncFetch(2)} data-api-url="/transfer/query/bymonth?pageindex=1&pagesize=100">
						1M
					</span>
				</div>
				{config ? <Area {...config} /> : <Empty />}
			</Spin>
		</div>
	);
};

export default React.memo(styled(DemoArea)`
	display: block;
	overflow: hidden;
	padding: 15px;
	.tab-bar {
		width: 180px;
		border-width: 1px;
		border-style: solid;
		border-color: #000000;
		border-radius: 5px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 34px;
		padding: 4px;
		cursor: pointer;
		span {
			width: 33%;
			text-align: center;
			font-size: 14px;
			color: #282e39;
			line-height: 26px;
			height: 26px;
			border-radius: 5px;
		}
		.curr {
			background-color: #000000;
			color: #fff;
		}
	}
`);
